{include file="common:header" /}
{include file="common:side" /}
<style>
  .start_time::placeholder,.end_time::placeholder {
    color: black;
  }
</style>
<!-- 引入样式 -->
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
    <div id="page-wrapper">
      <!-- 舆情日报 -->
      <!--*************************** content部分开始 ******************-->
      <div class="container-fluid" id="m_main">
        <div class="row m-t-20">
          <div class="col-sm-12">
            <div class="white-box">
              <h2 class="box-title m-b-20">编辑课程信息</h2>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">课程名称</label>
                    <input type="text" class="form-control" placeholder="" v-model="course.name">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">课程课时：</label>
                    <input type="text" class="form-control" placeholder="" v-model="course.periods">
                  </div>
                </div>
              </div>
              <div id="coursetime">
                <div class="row">
                  <div class="col-sm-4">
                    <div class="form-group">
                      <label class="control-label">课程时间：</label>
                    </div>
                  </div>
                </div>
                {foreach $info.week_arr as $key => $val}
                <div class="row classtime">
                  <div class="col-sm-1" style="text-align: center;">
                    每周
                  </div>
                  <div class="col-sm-2">
                    <div class="form-group">
                      <select class="selectpicker week" data-style="form-control" @change="setWeek()">
                        <option value="">请选择</option>
                        <option value="1" {if $val==1}selected{/if}>一</option>
                        <option value="2" {if $val==2}selected{/if}>二</option>
                        <option value="3" {if $val==3}selected{/if}>三</option>
                        <option value="4" {if $val==4}selected{/if}>四</option>
                        <option value="5" {if $val==5}selected{/if}>五</option>
                        <option value="6" {if $val==6}selected{/if}>六</option>
                        <option value="7" {if $val==7}selected{/if}>日</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-sm-2">
                    <div class="form-group">
                      <div class="input-group">
                        <input type="text" autocomplete="off" name="start" class="form-control input-group-input-date start_time" placeholder="{$info.start_time_arr[$key]}" timeval="{$info.start_time_arr[$key]}" onChange="setStarttime(this)">
                        <span class="input-group-btn input-group-btn-date">
                          <i class="mdi mdi-calendar-text"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-2">
                    <div class="form-group">
                      <div class="input-group">
                        <input type="text" autocomplete="off" name="end" class="form-control input-group-input-date end_time" placeholder="{$info.end_time_arr[$key]}" timeval="{$info.end_time_arr[$key]}" onChange="setEndtime(this)">
                        <span class="input-group-btn input-group-btn-date">
                          <i class="mdi mdi-calendar-text"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                  {if condition="$key==0"}
                  <div class="col-sm-1">
                    <button @click="addclasstime()" id="add" class="btn btn-outline btn-primary" style="padding: 9px 20px;">增加</button>
                  </div>
                  {else /}
                  <div class="col-sm-1">
                    <button onClick="delclasstime(this)" class="del btn btn-outline btn-primary btn-danger" style="padding: 9px 20px;">删除</button>
                  </div>
                  {/if}
                </div>
                {/foreach}
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">课程班级：</label>
                    <select id="classes_id" class="selectpicker" data-style="form-control" @change="getTeacher()">
                      <option value="">请选择</option>
                      {foreach $classes_list as $key=>$vo } 
                      <option value="{$vo.id}" {if $info.classes_id==$vo.id}selected{/if}>{$vo.name}</option>
                      {/foreach}
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">课程老师：</label>
                    <input type="text" class="form-control" placeholder="" v-model="course.teacher_name" disabled="">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">课程校址：</label>
                    <input type="text" class="form-control" placeholder="" v-model="course.address">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">课程教室：</label>
                    <select id="classroom_id" class="selectpicker" data-style="form-control">
                      <option value="">请选择</option>
                      {foreach $classroom_list as $key=>$vo } 
                      <option value="{$vo.id}" {if $info.classroom_id==$vo.id}selected{/if}>{$vo.name}</option>
                      {/foreach}
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">课程简介：</label>
                    <textarea class="form-control" placeholder="请输入..." v-model="course.summary">{{course.summary}}</textarea>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">排序号：</label>
                    <input type="text" class="form-control" placeholder="" v-model="course.ordernum">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label m-r-30">推荐到首页：</label>
                    <div class="radio radio-primary di m-r-30">
                      <input type="radio" name="isindex" v-model="course.isindex" value="1" id="item_0">
                      <label for="item_0">推荐</label>
                    </div>
                    <div class="radio radio-primary di">
                      <input type="radio" name="isindex" v-model="course.isindex" value="0" id="item_1">
                      <label for="item_1">不推荐</label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group m-addsku-pics">
                    <label class="control-label">课程照片：(750px*750px)</label>
                    <div>
                      <label for="add_course_info_pic" class="btn btn-primary waves-effect waves-light" style="line-height: 20px;padding: 6px 10px">添加图片</label>
                      <input type="file" id="add_course_info_pic" name="file" class="addpics" data-amount="1"/>
                      <div class="col-md-12">
                        <div id="course_info_pic_box" class="pic-box"></div>
                        <input type="hidden" name="course_info_pic" class="add-pic" id="course_info_pic" value="" data-id="1">
                        <input type="hidden" name="delete_course_info_pic" class="delete-pic" id="delete_course_info_pic">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">课程内容：</label>
                    <!-- 加载编辑器的容器 -->
	                  <script id="contents-box" name="content" type="text/plain"></script>
                    <!-- <textarea class="form-control" placeholder="请输入..." v-model="course.description">{{course.description}}</textarea> -->
                  </div>
                </div>
              </div>
              <div class="row m-t-40">
                <div class="col-sm-8 ta-c">
                  <button type="button" name="" class="btn btn-outline btn-primary m-r-40" @click="doSubmit()">提交</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- /.row -->
      </div>
      <!--*************************** content部分结束 ******************-->

      <!-- <footer class="footer text-center"> 2017 &copy; Ample Admin brought to you by themedesigner.in </footer> -->
    </div>
  {include file="common:js" /}
  {include file="common:footer" /}
  <script src="/assets/plugins/bower_components/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
  <script src="/assets/plugins/bower_components/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
  <script type="text/javascript" src="/web/uedit/ueditor.config.js"></script>
  <script type="text/javascript" src="/web/uedit/ueditor.all.js"></script>
  <script src="/assets/plugins/bower_components/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
  <script src="/assets/plugins/bower_components/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
  <script src="/assets/plugins/bower_components/jQuery-File-Upload/js/jquery.fileupload.js"></script>
  <script src="/web/js/edit.js"></script>
  <script>
  	$(function() {
  		upload_photo('#add_course_info_pic','/dboard/upload/cover_upload');
  	});
    function delclasstime(e) {
      $(e).parents('.classtime').remove();
    }
    function setStarttime(e) {
      $(e).attr('timeval',$(e).val())
    }
    function setEndtime(e) {
      $(e).attr('timeval',$(e).val())
    }
  </script>

  <script type="text/javascript">
    var vm = new Vue({
      el: '#m_main',
      data() {
        return {
          sid: '{$sid}',
          cid: "",
          course: {},
          start_time: '',
          end_time: '',
          week: '',
        }
      },
      mounted() {
        this.realizeDatePicker();
        // 初始化富文本编辑器
        var ue = UE.getEditor('contents-box');
        //获取url中"?"符后的字串
        var url = location.search;
        var theRequest = new Object();
        if (url.indexOf("?") != -1)
        {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++)
            {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        this.cid = theRequest.cid;
        this.requestData();
      },
      methods: {
        //实例化时间选择器
        realizeDatePicker() {
          var that = this;
          $('.start_time').datetimepicker({
            autoclose: true,
            startView: 1,
            maxView: 1,
            language: "zh-CN",
            format: "hh:ii"
          });
          // $('.start_time').datetimepicker()
          //  .on('hide', function (ev) {
          //   $(this).attr("timeval") = $(this).val();
          //  });
          $('.end_time').datetimepicker({
            autoclose: true,
            startView: 1,
            maxView: 1,
            language: "zh-CN",
            format: "hh:ii"
          });
          // $('.end_time').datetimepicker()
          // .on('hide', function (ev) {
          //   $(this).attr('timeval') = $(this).val();
          // });
        },
        requestData() {
          let that = this;
          axios.post('/dboard/course/infoData', {cid: this.cid},{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
            // console.log(res);
            if(res.data.Code == 0){
              that.course = res.data.Data.course;
              console.log(that.course)
              // that.start_time = res.data.Data.course.start_time;
              // that.end_time = res.data.Data.course.end_time;
              $("#contents-box").val(res.data.Data.course.description);
              $("#course_info_pic").val(res.data.Data.course.pic+",");
              if($("#course_info_pic").val().length != 0){
                show_photo('#course_info_pic');
              }
              // 初始化富文本编辑器
              var ue = UE.getEditor('contents-box');
              var str = $("#contents-box").val();
              ue.ready(function() {
                  ue.setContent(str,false);
              });
            }else{
              alert(res.data.Msg)
            }
          }).catch(err => {
            console.log(err);
          })
        },
        // 提交
        doSubmit(){
          var that = this;
          var weekval = '';
          var start_timeval = '';
          var end_timeval = '';
          console.log(that.start_time)
          that.start_time = '';
          that.end_time = '';
          that.week = '';
          $('#coursetime').find('.classtime').each(function (i,j) {
            weekval = $(j).find('.week').val();
            start_timeval = $(j).find('.start_time').attr('timeval');
          console.log(start_timeval)
            end_timeval = $(j).find('.end_time').attr('timeval');
            if (weekval) {
              that.week += '|'+weekval;
            }
            if (start_timeval) {
              that.start_time += '|'+start_timeval;
            }
            if (end_timeval) {
              that.end_time += '|'+end_timeval;
            }
          })
          var classes_id = $('#classes_id').find('option:selected').val();
          var classroom_id = $('#classroom_id').find('option:selected').val();
          var param = {
            sid: that.sid,
            cid: that.cid,
            name: that.course.name,
            summary: that.course.summary,
            ordernum: that.course.ordernum,
            week: that.week,
            start_time: that.start_time,
            end_time: that.end_time,
            classes_id: classes_id,
            periods: that.course.periods,
            address: that.course.address,
            classroom_id: classroom_id,
            isindex: that.course.isindex,
            description: UE.getEditor('contents-box').getContent(),
          }
          var courseStr = $('#course_info_pic').val();
          var courseArray = courseStr.split(",");
          courseArray.splice(courseArray.length-1, 1);
          if(courseArray.length>0) { param.pic = courseArray[0] };
          if(courseArray.length>1) { alert('课程照片最多上传1张');return false}

          axios.post('/dboard/course/editCourseinfo', param,{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
            // console.log(res);
            if(res.data.Code == 0){
              //请求成功
              alert(res.data.Msg);
              window.location.href = '/dboard/course/lists';
            }else{
              alert(res.data.Msg)
            }
          }).catch(err => {
            console.log(err);
          })
        },
        getTeacher(){
          var classes_id = $('#classes_id').find('option:selected').val();
          var param = {
            cid: classes_id,
          }
          axios.post('/dboard/classes/infoData', param,{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
            // console.log(res);
            if(res.data.Code == 0){
              if (res.data.Data.classes.master_teacher_name) {
                this.course.teacher_name = res.data.Data.classes.master_teacher_name
              }
            }
          }).catch(err => {
            console.log(err);
          })
        },
        setWeek(){
          // this.week+='|'+$('.week').find('option:selected').val();
        },
        addclasstime() {
          html = `
                <div class="row classtime">
                  <div class="col-sm-1" style="text-align: center;">
                    每周
                  </div>
                  <div class="col-sm-2">
                    <div class="form-group">
                      <select class="selectpicker week" data-style="form-control" @change="setWeek()">
                        <option value="">请选择</option>
                        <option value="1">一</option>
                        <option value="2">二</option>
                        <option value="3">三</option>
                        <option value="4">四</option>
                        <option value="5">五</option>
                        <option value="6">六</option>
                        <option value="7">日</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-sm-2">
                    <div class="form-group">
                      <div class="input-group">
                        <input type="text" autocomplete="off" name="start" class="form-control input-group-input-date start_time" placeholder="请选择开始时间" onChange="setStarttime(this)">
                        <span class="input-group-btn input-group-btn-date">
                          <i class="mdi mdi-calendar-text"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-2">
                    <div class="form-group">
                      <div class="input-group">
                        <input type="text" autocomplete="off" name="end" class="form-control input-group-input-date end_time" placeholder="请选择结束时间" onChange="setEndtime(this)">
                        <span class="input-group-btn input-group-btn-date">
                          <i class="mdi mdi-calendar-text"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-1">
                    <button onClick="delclasstime(this)" class="del btn btn-outline btn-primary btn-danger" style="padding: 9px 20px;">删除</button>
                  </div>`;
          $('#coursetime').append(html);
          $('.week').selectpicker('refresh');
          $('.start_time').datetimepicker({
            autoclose: true,
            startView: 1,
            maxView: 1,
            language: "zh-CN",
            format: "hh:ii"
          });
          $('.end_time').datetimepicker({
            autoclose: true,
            startView: 1,
            maxView: 1,
            language: "zh-CN",
            format: "hh:ii"
          });
        },
      }
    })
  </script>
